<template>
  <div style="border-bottom: 0px solid #dfdfdf;font-size: 14px;">
    <div style="display: flex;height: 60px;padding: 10px 110px;background-color: #a6acaf;">
      <div class="top-title" style="padding-right: 20px;border-right: 1px solid rgb(230 230 230);line-height: 40px;color: #FFFFFF;">手机版</div>
      <div class="top-title" style="padding-right: 20px;border-right: 1px solid rgb(230 230 230);line-height: 40px;color: #FFFFFF;margin-left: 20px;">留言反馈</div>
      <div class="top-title" style="padding-right: 20px;border-right: 1px solid rgb(230 230 230);line-height: 40px;color: #FFFFFF;margin-left: 20px;">会员中心</div>
      <div class="top-title" style="line-height: 40px;color: #FFFFFF;margin-left: 20px;">收藏本站</div>
      <div style="flex: 1;display: flex;">
        <div style="flex: 1;"></div>
        <div style="width: 170px;display: flex;">

          <div style="margin-top: 10px" v-if="isLogin">
            <el-dropdown>
              <i class="el-icon-arrow-down el-icon--right"></i>
              <el-dropdown-menu slot="dropdown" style="margin-top: 20px;">
                <el-dropdown-item divided @click.native="logout">
                  <span>退出登录</span>
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>

          <img src="@/assets/img/head.png" v-if="isLogin" style="cursor: pointer;height: 30px;margin-top: 5px;margin-right: 20px;">
          <el-button type="text" style="color: #FFFFFF;" class="top-title" v-if="isLogin">您好，{{username}}</el-button>
          <el-button type="text" style="color: #FFFFFF;" class="top-title" v-if="!isLogin" @click="goLogin()">请 登 录</el-button>

          <div style="display: flex;width: 100px;padding: 0 10px;" class="top-title">
            <img src="@/assets/img/car.png" style="width: 20px;height: 20px;margin-top: 10px;margin-right: 15px;">
            <el-button type="text" style="color: #FFFFFF;" class="top-title">购物车</el-button>
          </div>

        </div>

      </div>
    </div>

  </div>
</template>

<script>

export default {
  name: "ctop",
  data(){
    return{
    }
  },
  props:{
    username:String,
    isLogin:Boolean
  },
  methods:{


    async logout() {
      this.$confirm('确定注销并退出系统吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$store.dispatch('LogOut').then(() => {
          location.href = '/classify/prod1';
          this.isLogin = false
        })
      }).catch(() => {});
    },
    goLogin(){
      this.$router.push('/login')
    }
  }
}
</script>

<style scoped lang="scss">
.el-header {
  backdrop-color: #899db9;
  color: #333;
  line-height: 60px;
}

.el-aside {
  color: #333;
}

.product:hover{
  cursor: pointer;
  transform: scale(1.05);
  border-top: 1px solid red!important;
}

.el-tag {
// white-space: normal;
  height: auto;
  text-align: center;
}

.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
}

.top-title:hover{
  cursor: pointer;
  color: #e5e5e5!important;
}
.title{
  font-weight: bold;
  font-size: 18px;
}
.title:hover{
  color: #c250c6!important;
}
</style>
